<div class="underlying">
  <div class="table" id="warp" (scroll)="againGet()">
    <div class="bbs">
      <div>
        <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
          <input type="text" nz-input placeholder="查詢料號" [(ngModel)]="liaohao" />
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button (click)="getData()" nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i>搜索</button>
        </ng-template>
      </div>
    </div>
    <!-- 头部Table -->
    <nz-table #headerTable
     style="border-collapse:collapse;border-radius:4px 4px 0px 0px;" [nzData]="listOfData"
      class="designTable" [nzShowPagination]='false'
      [nzScroll]="{ y: '700px'}">
      <thead class="tableHeard" style="text-align: center !important;color: #ffffff;height: 50px;">
        <tr style="text-align: center !important;">
          <th nzWidth="50px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="180px">PR NO</th>
          <th nzWidth="100px">PO NO</th>
          <th nzWidth="100px">序號</th>
          <th nzWidth="150px">料號</th>
          <th nzWidth="100px">數量</th>
          <th nzWidth="100px">含稅單價</th>
          <th nzWidth="100px">廠商</th>
          <th nzWidth="100px">幣別</th>
          <th nzWidth="250px">卡口核放單號</th>
          <th nzWidth="200px">採購原因</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent">
        <tr id="first" *ngFor="let item of listOfData let key = index">
          <!-- 编辑按钮 -->
          <td>
            <div class="editable-row-operations">
              <ng-container *ngIf="editCache[key].edit; else saveTpl">
                <a (click)="startEdit(key)"><img src="../../../assets/image/icon_edit_white.svg"></a>
              </ng-container>
              <ng-template #saveTpl>
                <a (click)="saveEdit(key)"><img src="../../../assets/image/icon_ok.svg"></a>
              </ng-template>
            </div>
          </td>
          <!-- 删除按钮 -->
          <td>
            <button class="del" *ngIf="editCache[key].isdel" (click)="showModal(item)"></button>
            <a (click)="cancelEdit(key)" *ngIf="!editCache[key].edit">
              <img src="../../../assets/image/icon_cancel.svg">
            </a>
          </td>
          <!-- PR_NO -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else PR_NO">
              {{item.PR_NO}}
            </ng-container>
            <ng-template #PR_NO>
              <input style="width: 180px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].PR_NO" />
            </ng-template>
          </td>
          <!-- PO_NO -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else PO_NO">
              {{item.PO_NO}}
            </ng-container>
            <ng-template #PO_NO>
              <input style="width: 180px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].PO_NO" />
            </ng-template>
          </td>
          <!-- 序號 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else SN">
              {{item.SN}}
            </ng-container>
            <ng-template #SN>
              <input style="width: 100px;color:#ffffff;" type="text" nz-input [(ngModel)]="editCache[key]['data'].SN" />
            </ng-template>
          </td>
          <!-- 料號 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else material_no">
              {{item.material_no}}
            </ng-container>
            <ng-template #material_no>
              <input style="width: 180px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].material_no" />
            </ng-template>
          </td>
          <!-- 數量 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else quatity">
              {{item.quatity}}
            </ng-container>
            <ng-template #quatity>
              <input style="width: 100px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].quatity" />
            </ng-template>
          </td>
          <!-- 含稅單價 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else price">
              {{item.price}}
            </ng-container>
            <ng-template #price>
              <input style="width: 100px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].price" />
            </ng-template>
          </td>
          <!-- 廠商 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else manufacturer">
              {{item.manufacturer}}
            </ng-container>
            <ng-template #manufacturer>
              <input style="width: 100px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].manufacturer" />
            </ng-template>
          </td>
          <!-- 幣別 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else currency">
              {{item.currency}}
            </ng-container>
            <ng-template #currency>
              <input style="width: 100px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].currency" />
            </ng-template>
          </td>
          <!-- 卡口核放單號 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else check_no">
              {{item.check_no}}
            </ng-container>
            <ng-template #check_no>
              <input style="width: 300px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].check_no" />
            </ng-template>
          </td>
          <!-- 採購原因 -->
          <td class="input_first" style="cursor:pointer;max-width: 200px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;" title={{item.purchasing_reason}}>
            <ng-container *ngIf="editCache[key].edit; else purchasing_reason">
              {{item.purchasing_reason}}
            </ng-container>
            <ng-template #purchasing_reason>
              <input style="width: 200px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].purchasing_reason" />
            </ng-template>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <!-- 删除弹出框-->
    <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
      <p>確定刪除嗎？</p>
    </nz-modal>
  </div>
</div>
